<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<view class="left">
					<image class="img-tz" src="../../../../static/ring/chart/huodong.png" mode=""></image>
					<image class='img-tip' src="../../../../static/ring/tipinfo.png" mode=""></image>
				</view>
				<view class="right">
					<view class="label">
						偏低
					</view>
					<image class="right-arrow-icon" src="/static/icon/right.svg" mode="widthFix" @click="gotoDataPage">
					</image>
				</view>

			</view>

			<text class="refresh-tip">当前活动量低于周平均水平，请继续努力</text>
			<view class="data">
				<view v-for="(item, index) in activityData" :key="item.title" class="item">
					<view class="item-wrap">
						<view class="label-wrap">
							<image :src="'/static/ring/chart/'+item.img" mode=""></image>
							<text class="name">{{ item.title }}</text>
						</view>
						<text class="value">
							<text>{{ item.value || "--" }}</text>
							<text class="unit">{{ item.unit }}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMyStepInfoByDay
	} from "@/api/ring/chart.js";
	import dayjs from "dayjs";
	import store from "@/store/index.js";

	export default {
		props: {
			date: String,
		},
		data() {
			return {
				activityData: [{
						title: "距离",
						value: "999",
						unit: "米",
						img: 'juli.png'
					},
					{
						title: "消耗",
						value: "--",
						unit: "卡",
						img: 'xiaohao.png'
					},
					{
						title: "步数",
						value: 0,
						unit: "步",
						img: 'bushu.png'
					},
				],
			};
		},

		computed: {
			isLogin() {
				return store.state.userToken;
			},
		},

		methods: {
			getTitle() {
				return 'activity';
			},
			gotoDataPage() {
				const date = dayjs().format("YYYY-MM-DD");
				// 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
				uni.navigateTo({
					url: `/pages/ring/detail/index?type=Activity&title=活动&date=` + date
				});
			},
			updateChartData(date) {
				if (!this.isLogin) return;
				if (!date || date == 'Invalid Date') {
					date = dayjs().format("YYYY-MM-DD HH:mm:ss");
				}
				// date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
				queryMyStepInfoByDay({
						dateStr: dayjs(date).format("YYYY-MM-DD"),
						offsetMinutes: new Date().getTimezoneOffset(),
					})
					.then((res) => {
						console.log("queryMyStepInfoByDay", res.data);

						this.activityData[0].value = !res.data.distanceSum ? 0 : res.data.distanceSum.toFixed(1);
						this.activityData[1].value = !res.data.calSum ? 0 : res.data.calSum.toFixed(1);
						this.activityData[2].value = res.data.sum || 0;
					})
					.catch((error) => console.log(error));
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chart_box {
		width: 100%;
		height: 100%;
		color: black;

		.w-70rpx {
			width: 48rpx;
		}

		.w-40rpx {
			width: 40rpx;
		}

		.chart_container {
			padding: 20rpx 30rpx;

			.head {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-bottom: 8rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: center;

					.img-tz {
						width: 104rpx;
						height: 44rpx;
						margin-right: 12rpx;
					}

					.img-tip {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					.label {
						width: 60rpx;
						height: 36rpx;
						text-align: center;
						line-height: 36rpx;
						background: rgba(221, 158, 0, 1);
						border-radius: 10rpx;
						background: rgba(221, 158, 0, 0.2);
						font-size: 20rpx;
						color: rgba(221, 158, 0, 1);
						margin-right: 14rpx;

					}

					.right-arrow-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.right-arrow-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.refresh-tip {
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
				margin-bottom: 16rpx;
			}

			.data {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					flex: 1;
					display: flex;
					align-items: center;

					.item-wrap {
						flex: 1;
						text-align: center;
					}



					.label-wrap {
						margin-bottom: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}

						.name {
							font-size: 28rpx;
							font-weight: 500;
						}
					}

					.value {
						font-weight: 500;
						text-align: center;
						font-size: 40rpx;
						color: rgba(0, 0, 0, 1);

						.unit {
							font-size: 20rpx;
							color: rgba(102, 102, 102, 1);
						}
					}


				}

				.item:nth-of-type(1) {
					.item-wrap {
						text-align: left;

						.label-wrap {
							justify-content: unset;
						}
					}
				}

				.item:nth-of-type(2) {
					width: 268rpx;
					flex: unset;
				}

				.item:nth-of-type(2)::before {
					content: ' ';
					width: 4rpx;
					height: 40rpx;
					border-radius: 24rpx;
					background: rgba(204, 204, 204, 1);

				}

				.item:nth-of-type(2)::after {
					content: ' ';
					width: 4rpx;
					height: 40rpx;
					border-radius: 24rpx;
					background: rgba(204, 204, 204, 1);

				}
			}
		}
	}
</style>